<template>
  <div class="content">
    <div class="djbaDiv">
      <TitleVue :name="'登记与备案'" />
      <div class="djbaContent">
        <div class="leftDiv">
          <p style="font-size: 1.9vh">申报</p>
          <p>（大坝管理单位）</p>
          <div class="firstDiv">
            <span>省级</span>
            <div class="aaaDiv">
              <p>1亿立方米库容及直管水库大坝</p>
            </div>
          </div>
          <div class="firstDiv">
            <span>市级</span>
            <div class="aaaDiv">
              <p>1000万至1亿立方米库容及直管水库大坝</p>
            </div>
          </div>
          <div class="firstDiv">
            <span>县级</span>
            <div class="aaaDiv">
              <p>10-1000万立方米库容</p>
            </div>
          </div>
        </div>
        <div class="jiantouDiv">
          <i class="el-icon-right"></i>
        </div>
        <div class="centerDiv">
          <p style="font-size: 1.9vh">审核</p>
          <p>（注册登记机构）</p>
        </div>
        <div class="jiantouDiv">
          <i class="el-icon-right"></i>
        </div>
        <div class="centerDiv">
          <p style="font-size: 1.9vh">发证</p>
          <p>（注册登记受理机构）</p>
        </div>
      </div>
    </div>

    <div class="yxglDiv">
      <TitleVue :name="'运行管理'" />
      <div class="yxglContent">
        <div class="itemDiv" v-for="(item, index) in ssgqList" :key="index">
          <div class="leftDiv">
            <img :src="require('@/assets/img/common/' + item.name + '.png')" alt="" />
            <p>{{ item.name }}</p>
          </div>
          <div class="rightDiv">
            <p>{{ item.content1 }}{{ item.val }}{{ item.unit }}</p>
            <p>{{ item.content2 }}{{ item.val2 }}{{ item.unit2 }}</p>
            <div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TitleVue from '../common/titleVue.vue'
export default {
  name: 'JzLeft',
  components: {
    TitleVue
  },
  data() {
    return {
      ssgqList: [
        {
          name: '调度运行',
          content1: '频率：',
          val: 3,
          unit: '次/月',
          content2: '·最近一次时间：',
          val2: 3,
          unit2: '天前'
        },
        {
          name: '维修养护',
          content1: '频率：',
          val: 2,
          unit: '次/月',
          content2: '·最近一次时间：',
          val2: 10,
          unit2: '天前'
        },
        {
          name: '安全鉴定',
          content1: '频率：',
          val: 6,
          unit: '次/年',
          content2: '·最近一次时间：',
          val2: 242,
          unit2: '天前'
        },
        {
          name: '除险加固 ',
          content1: '频率：',
          val: 1,
          unit: '次/月',
          content2: '·最近一次时间：',
          val2: 22,
          unit2: '天前'
        }
      ]
    }
  },
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .djbaDiv {
    width: 100%;
    height: auto;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px;
    box-sizing: border-box;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
  }
  .djbaContent {
    flex: 1;
    width: 100%;
    height: auto;
    padding: 0.8vh 0.5vw;
    box-sizing: border-box;
    display: flex;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 1.5vh;
    color: #ffffff;
    .leftDiv {
      border-radius: 6px;
      border: 2px solid #29578f;
      text-align: center;
      padding: 5px;
      box-sizing: border-box;
      .firstDiv {
        width: 100%;
        display: flex;
        span {
          writing-mode: vertical-rl;
        }
        .aaaDiv {
          width: 8vw;
          background: url('@/assets/img/common/kv-a2.png') no-repeat;
          background-size: 100% 100%;
          padding: 2vh;
          box-sizing: border-box;
        }
      }
    }
    .jiantouDiv {
      width: auto;
      height: 100%;
      display: flex;
      align-items: center;
      .el-icon-right {
        font-size: 20px;
      }
    }
    .centerDiv {
      width: auto;
      height: 100%;
      border-radius: 6px;
      border: 2px solid #29578f;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
    }
  }

  .yxglDiv {
    flex: 1;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .yxglContent::-webkit-scrollbar {
      display: none;
    }
    .yxglContent {
      flex: 1;
      padding: 0 3vh;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      overflow: auto;

      .itemDiv {
        width: 100%;
        height: auto;
        display: flex;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 1.7vh;
        color: #c5d1df;
        .leftDiv {
          width: auto;
          margin-right: 0.5vw;
          display: flex;
          flex-direction: column;
          img {
            margin-right: 0.3vw;
            width: 90%;
          }
          p {
            font-family: YouSheBiaoTiHei;
            font-weight: 400;
            font-size: 1.9vh;
            color: #ffffff;
          }
        }
        .rightDiv {
          width: auto;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          p:nth-child(1) {
            width: 80%;
            font-size: 1.9vh;
            margin-bottom: 5px;
            padding: 5px;
            color: #ffffff;
            background: linear-gradient(to right, #0565a7, transparent);
          }
        }
      }
    }
  }
}
</style>
